<template>
    <div class="Vector">
        <div class="dir">
             <DirCatalog v-has="'muluchaxun'"></DirCatalog>
        </div>
        <div v-if="dataType" class="content">
            <div class="broad">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item >目录管理</el-breadcrumb-item>
                    <el-breadcrumb-item>矢量成果</el-breadcrumb-item>
                        <el-breadcrumb-item  v-for="(item,index) in resetVectorBreadCrumbsList" v-bind:key="index">{{ item }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="demo-input-suffix">
                <div class="searchBar">
                  <div class="datamove">
<!--                    <download-excel-->
<!--                      class="export-excel-wrapper"-->
<!--                      :data="theDownloadXlsDataInfos"-->
<!--                      :fields="json_fields"-->
<!--                      :name="xls_name">-->
                      <el-button type="goon" v-has="'daochu'" round size="medium" @click="downloadYSVectorDataXls" ><i class="el-icon-download el-icon--left"></i>数据导出</el-button>
<!--                    </download-excel>-->
                  </div>
                    <span >环境要素管控分区编码</span>
                    <el-input size="medium" width="100"  v-model="requestParams.code">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <span class="margin_left">行政单元</span>
                      <el-select size="medium" v-model="requestParams.name" placeholder="请选择行政单元">
                        <el-option v-for="(itme,index) in theOptions"  v-if="itme.isShow  "   v-bind:key="index" :label="itme.name" v-bind:value="itme.name"></el-option>
                      </el-select>
<!--                    <el-input size="medium" v-model="requestParams.name">-->
<!--                        <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--                    </el-input>-->
<!--                    <span class="margin_left">类型编码</span>-->
<!--                    <el-input size="medium" v-model="vectorLx">-->
<!--                        <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--                    </el-input>-->
                    <el-button type="goon" round v-has="'liebiaochaxun'"
                               size="medium"  icon="el-icon-search" @click="findDataByKeys">
                        查找
                    </el-button>
                    <el-button type="goon" round v-has="'liebiaochaxun'"
                               size="medium"  icon="el-icon-refresh" @click="resetModel">
                        重置
                    </el-button>
                </div>
            </div>

            <div class="dialogXq">
              <el-dialog title="详情列表"   :visible.sync="dialogFormVisible2" center :close-on-click-modal=false>
                <template>
                  <div style="text-align: center">
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first "  ><div class="contentText" >环境要素管控分区编码</div></el-col>
                      <el-col :span="8" class="second"  ><div class="contentText" >{{ ysInfo.hjdybm }}</div></el-col>
                      <el-col :span="4" class="second"  ><div class="contentText"  >环境要素管控分区名称</div></el-col>
                      <el-col :span="8" class="second"  ><div class="contentText" :title="ysInfo.hjdymc" >{{ ysInfo.hjdymc }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >省级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.prov }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >市级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.city }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >县级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.county }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >管控区分类</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.gkqfl }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >环境要素</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.hjys }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >要素细类</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ ysInfo.ysxl }}</div></el-col>
                    </el-row>
                  </div>
                </template>
<!--                <el-table-->
<!--                  :data="VectorDataRow"-->
<!--                  border-->
<!--                  mini-->
<!--                  style="width: 100%">-->
<!--                  <el-table-column-->
<!--                    prop="hjdybm"-->
<!--                    label="环境要素管控分区编码"-->
<!--                    width="170">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="hjdymc"-->
<!--                    label="环境要素管控分区名称"-->
<!--                    width="230">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="city"-->
<!--                    label="区域"-->
<!--                    width="140">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="county"-->
<!--                    label="所属团场"-->
<!--                    width="100">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="ysxl"-->
<!--                    label="要素细类"-->
<!--                    width="160">-->
<!--                  </el-table-column>-->

<!--                  <el-table-column-->
<!--                    prop="shapeLeng"-->
<!--                    label="周长(千米)"-->
<!--                    width="160">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                  prop="shapeArea"-->
<!--                  label="面积(平方千米)"-->
<!--                >-->
<!--                </el-table-column>-->

<!--                </el-table>-->
              </el-dialog>
            </div>
            <div class="dialogXq">
              <el-dialog title="详情列表"   :visible.sync="dialogFormVisible4" center :close-on-click-modal=false>
                <template>
                  <div style="text-align: center">
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first "  ><div class="contentText" >环境要素管控分区编码</div></el-col>
                      <el-col :span="8" class="second"  ><div class="contentText" >{{ shuiYSInfos.hjdybm }}</div></el-col>
                      <el-col :span="4" class="second"  ><div class="contentText"  >环境要素管控分区名称</div></el-col>
                      <el-col :span="8" class="second"  ><div class="contentText" :title="shuiYSInfos.hjdymc" >{{ shuiYSInfos.hjdymc }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >省级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.prov }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >市级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.city }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >县级行政单元</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.county }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >流域名称</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.lymc }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >河段名称</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.hdmc }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >管控区分类</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.GKQFL }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >控制断面起点经度</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.KZDMQDJD }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >控制断面起点纬度</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.KZDMQDWD }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >控制断面终点经度</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.KZDMZDJD }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >控制断面终点纬度</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.KZDMZDWD }}</div></el-col>
                    </el-row>
                    <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                      <el-col :span="4" class="first2 "  ><div class="contentText" >环境要素</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.HJYS }}</div></el-col>
                      <el-col :span="4" class="second2"  ><div class="contentText" >要素细类</div></el-col>
                      <el-col :span="8" class="second2"  ><div class="contentText" >{{ shuiYSInfos.YSXL }}</div></el-col>
                    </el-row>
                  </div>
                </template>
                <!--                <el-table-->
                <!--                  :data="VectorDataRow"-->
                <!--                  border-->
                <!--                  mini-->
                <!--                  style="width: 100%">-->
                <!--                  <el-table-column-->
                <!--                    prop="hjdybm"-->
                <!--                    label="环境要素管控分区编码"-->
                <!--                    width="170">-->
                <!--                  </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                    prop="hjdymc"-->
                <!--                    label="环境要素管控分区名称"-->
                <!--                    width="230">-->
                <!--                  </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                    prop="city"-->
                <!--                    label="区域"-->
                <!--                    width="140">-->
                <!--                  </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                    prop="county"-->
                <!--                    label="所属团场"-->
                <!--                    width="100">-->
                <!--                  </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                    prop="ysxl"-->
                <!--                    label="要素细类"-->
                <!--                    width="160">-->
                <!--                  </el-table-column>-->

                <!--                  <el-table-column-->
                <!--                    prop="shapeLeng"-->
                <!--                    label="周长(千米)"-->
                <!--                    width="160">-->
                <!--                  </el-table-column>-->
                <!--                  <el-table-column-->
                <!--                  prop="shapeArea"-->
                <!--                  label="面积(平方千米)"-->
                <!--                >-->
                <!--                </el-table-column>-->

                <!--                </el-table>-->
              </el-dialog>
            </div>
            <div class="vectortable">
                    <el-table
                            :data="VectorData"
                            :stripe="true"
                            border
                            mini
                            style="width: 100%"
                            height="100%">
<!--                            @selection-change="handleSelectionChange"-->
<!--                        <el-table-column-->
<!--                                type="selection"-->
<!--                                width="50">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                fixed
                                prop="ID"
                                label="序号"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                prop="hjdybm"
                                label="环境要素管控分区编码"
                                width="170">
                        </el-table-column>
                        <el-table-column
                                prop="hjdymc"
                                :show-overflow-tooltip="true"
                                header-align="hjdymc"
                                label="环境要素管控分区名称"
                                width="230">
                        </el-table-column>
                        <el-table-column
                                prop="city"
                                label="地州/师"
                                width="200">
                        </el-table-column>
                        <el-table-column
                          prop="county"
                          label="县市/团"
                          width="140">
                        </el-table-column>
                        <el-table-column
                                prop="ysxl"
                                :show-overflow-tooltip="true"
                                header-align="ysxl"
                                label="要素细类"
                                width="230">
                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="详情">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-info"></i></el-button>
<!--                                <el-button-->
<!--                                        size="mini"-->
<!--                                        @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>-->
<!--                                <el-button-->
<!--                                        size="mini"-->
<!--                                        type="danger"-->
<!--                                        @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>

                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="theCurrentPageNumber"
                    :page-sizes="[15,20,30,50]"
                    :page-size="15"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=vectorDataTotal>
                  </el-pagination>
                </div>
            </div>
        </div>
        <div v-else   class="content">
          <div class="broad">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>目录管理</el-breadcrumb-item>
              <el-breadcrumb-item>矢量成果</el-breadcrumb-item>
              <el-breadcrumb-item  v-for="(item,index) in resetVectorBreadCrumbsList" v-bind:key="index">{{ item }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="demo-input-suffix">
<!--            <div id="datamove"><el-button type="danger" size="mini" @click="DataMigration"><i class="el-icon-upload el-icon&#45;&#45;left"></i>数据迁移</el-button> </div>-->
            <div class="searchBar">
              <div class="datamove">
<!--                <download-excel-->
<!--                  class="export-excel-wrapper"-->
<!--                  :data="theDownloadXlsDataInfos"-->
<!--                  :fields="json_fields2"-->
<!--                  :name="xls_name">-->
                  <el-button v-has="'daochu'"  @click="downloadYSVectorDataXls" type="goon" round size="medium"><i class="el-icon-download el-icon--left"></i>数据导出</el-button>
<!--                </download-excel>-->
              </div>
              <span>环境管控单元编码</span>
              <el-input size="medium" width="100"  v-model="requestParams.code">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <span class="margin_left">行政单元</span>
              <el-select size="medium" v-model="requestParams.name" placeholder="请选择行政单元">
                   <el-option v-for="(itme,index) in theOptions"  v-if="itme.isShow "   v-bind:key="index" :label="itme.name" v-bind:value="itme.name"></el-option>
               </el-select>
<!--              <el-input size="medium" v-model="requestParams.name">-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--              </el-input>-->
<!--              <span class="margin_left">类型编码</span>-->
<!--              <el-input size="medium" v-model="vectorLx">-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--              </el-input>-->
              <el-button type="goon" round v-has="'liebiaochaxun'"
                         size="medium"  icon="el-icon-search" @click="findDataByKeys">
                查找
              </el-button>
              <el-button type="goon" round v-has="'liebiaochaxun'"
                         size="medium"  icon="el-icon-refresh" @click="resetModel">
                重置
              </el-button>
            </div>

          </div>
          <div   class="vectortable">
            <el-table
              :data="theDyVectorData"
              :stripe="true"
              border
              mini
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange">
<!--              <el-table-column-->
<!--                type="selection"-->
<!--                width="50">-->
<!--              </el-table-column>-->
              <el-table-column
                fixed
                prop="ID"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                prop="hjdybm"
                label="环境管控单元编码"
                width="170">
              </el-table-column>
              <el-table-column
                prop="hjdymc"
                label="环境管控单元名称"
                width="230">
              </el-table-column>
              <el-table-column
                prop="city"
                label="地州/师"
                width="200">
              </el-table-column>
              <el-table-column
                prop="county"
                label="县市/团"
                width="140">
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
                width="230">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="详情">
                <template slot-scope="scope">
                  <el-button @click="handleClickDY(scope.row)" type="primary" size="mini"><i class="el-icon-info"></i></el-button>
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>-->
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    type="danger"-->
<!--                    @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>-->
                </template>
              </el-table-column>
            </el-table>

            <div class="block" style="margin-top:2px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="theCurrentPageNumber"
                :page-sizes="[15,20,30,50]"
                :page-size="15"
                layout="total, sizes, prev, pager, next, jumper"
                :total=theDyVectorDataTotal>
              </el-pagination>
            </div>
          </div>
          <div class="dialogXq">
            <el-dialog title="详情列表"   :visible.sync="dialogFormVisible3" center :close-on-click-modal=false>
              <template>
                <div style="text-align: center">
                  <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                    <el-col :span="4" class="first "  ><div class="contentText" >环境要素管控分区编码</div></el-col>
                    <el-col :span="8" class="second"  ><div class="contentText" >{{ dyInfos.hjdybm }}</div></el-col>
                    <el-col :span="4" class="second"  ><div class="contentText"  >环境要素管控分区名称</div></el-col>
                    <el-col :span="8" class="second"  ><div class="contentText" :title="ysInfo.hjdymc" >{{ ysInfo.hjdymc }}</div></el-col>
                  </el-row>
                  <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                    <el-col :span="4" class="first2 "  ><div class="contentText" >省级行政单元</div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" >{{ dyInfos.prov }}</div></el-col>
                    <el-col :span="4" class="second2"  ><div class="contentText" >市级行政单元</div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" >{{ dyInfos.city }}</div></el-col>
                  </el-row>
                  <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                    <el-col :span="4" class="first2 "  ><div class="contentText" >县级行政单元</div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" >{{ dyInfos.county }}</div></el-col>
                    <el-col :span="4" class="second2"  ><div class="contentText" >管控单元分类</div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" >{{ dyInfos.gkqfl }}</div></el-col>
                  </el-row>
                  <el-row :gutter="6" style="margin-right: 10px;margin-left: 10px;">
                    <el-col :span="4" class="first2 "  ><div class="contentText" >备注</div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" >{{ dyInfos.remarks }}</div></el-col>
                    <el-col :span="4" class="second2"  ><div class="contentText" ></div></el-col>
                    <el-col :span="8" class="second2"  ><div class="contentText" ></div></el-col>
                  </el-row>
                </div>
              </template>
<!--              <el-table-->
<!--                :data="VectorDataRow"-->
<!--                border-->
<!--                mini-->
<!--                style="width: 100%"-->

<!--                @selection-change="handleSelectionChange">-->
<!--                &lt;!&ndash;              <el-table-column&ndash;&gt;-->
<!--                &lt;!&ndash;                type="selection"&ndash;&gt;-->
<!--                &lt;!&ndash;                width="50">&ndash;&gt;-->
<!--                &lt;!&ndash;              </el-table-column>&ndash;&gt;-->


<!--                <el-table-column-->
<!--                  prop="hjdybm"-->
<!--                  label="环境管控单元编码"-->
<!--                  width="170">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="hjdymc"-->
<!--                  label="环境管控单元名称"-->
<!--                  width="240">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="city"-->
<!--                  label="区域"-->
<!--                  width="140">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="gkdyfl"-->
<!--                  label="管控单元分类"-->
<!--                  width="110">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="remarks"-->
<!--                  label="备注"-->
<!--                  width="140">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="shapeLeng"-->
<!--                  label="周长(千米)"-->
<!--                  width="160">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="shapeArea"-->
<!--                  label="面积(平方千米)"-->
<!--                >-->
<!--                </el-table-column>-->
<!--              </el-table>-->

            </el-dialog>
          </div>
        </div>
    </div>
</template>

<script>
    import {createNamespacedHelpers} from 'vuex'
    const {mapGetters} = createNamespacedHelpers('dirmanage')
    import DirManagementTwo from "../DirManagementTwo";
    import DirCatalog from "./DirCatalog";
    export default {
        name: "TheVector",
        components:{
            // DirManagement,
          DirCatalog
        },
      data() {
        return {
          options2:[],
          options: [{
            value: 1,
            label: '第一师'
          }, {
            value: 2,
            label: '第二师',
          }, {
            value: 3,
            label: '第三师',
          }, {
            value: 4,
            label: '第四师',
          }, {
            value: 5,
            label: '第五师',
          }, {
            value: 6,
            label: '第六师',
          }, {
            value: 7,
            label: '第七师',
          }, {
            value: 8,
            label: '第八师',
          }, {
            value: 9,
            label: '第九师',
          }, {
            value: 10,
            label: '第十师',
          }, {
            value: 11,
            label: '第十一师',
          }, {
            value: 12,
            label: '第十二师',
          }, {
            value: 13,
            label: '第十三师',
          }, {
            value: 14,
            label: '第十四师',
          }],
          autoHeight: 700,
          currentPage1: 2,
          vectorBh: '',
          vectorQy: "",
          vectorLx: "",
          VectorDataRow:[],
          CatalogId:0,
          downloadYSVectorData:[],
          dialogFormVisible2:false,
          dialogFormVisible3:false,
          dialogFormVisible4:false,
          requestKey : {
            pageNumber2:1,
            pageSize2:15,
            code2:'',
            name2:'',
            catalogId2:''
          },
          requestParams:{
            pageNumber:1,
            pageSize:15,
            code:'',
            name:'',
            catalogId:''
          },
          json_fields: {
            "序号":'ids',
            "环境要素管控分区编码": "hjdybm",
            "环境要素管控分区名称": "hjdymc",
            "省级行政单元":'prov',
            "市级行政单元":'city',
            "县级行政单元":'county',
            "管控区分类":'gkqfl',
            "环境要素":'hjys',
            "要素细类":'ysxl',
            '流域名称':'lymc',
            '河段名称':'hdmc',
            '控制断面起点经度':'kzdmqdjd',
            '控制断面起点纬度':'kzdmqdwd',
            '控制断面终点经度':'kzdmzdjd',
            '控制断面终点纬度':'kzdmzdwd',
            "面积":'shapeArea',
            "周长":'shapeLeng'

          },
          json_fields2:{
            "序号":'ids',
            "环境管控单元编码": "hjdybm",
            "环境管控单元名称": "hjdymc",
            "省级行政单元":'prov',
            "市级行政单元":'city',
            "县级行政单元":'county',
            "管控单元分类":'gkdyfl',
            "备注":'remarks',
            "面积":'shapeArea',
            "周长":'shapeLeng'
          },
          json_meta: [
            [
              {
                " key ": "charset",
                " value ": "utf-8"
              }
            ]
          ],
          dyInfos:{
            hjdybm:'',
            hjdymc:'',
            prov:'',
            city:'',
            county:'',
            gkdyfl:'',
            remarks:''
          },
          shuiYSInfos:{
            hjdybm:'',
            hjdymc:'',
            prov:'',
            city:'',
            county:'',
            lymc:'',
            hdmc:'',
            KZDMQDJD:'',
            KZDMQDWD:'',
            KZDMZDJD:'',
            KZDMZDWD:'',
            GKQFL:'',
            HJYS:'',
            YSXL:'',
          },
          ysInfo:{
            hjdybm:'',
            hjdymc:'',
            prov:'',
            city:'',
            county:'',
            gkqfl:'',
            hjys:'',
            ysxl:''
          }
        }
      },
      computed:{
          // ...mapGetters(['dirDocumentId']),
          ...mapGetters(['VectorData']),
          ...mapGetters(['vectorDataTotal']),
          ...mapGetters(['theVector/reset']),
          ...mapGetters(['resetVectorBreadCrumbsList']),
          ...mapGetters(['dataType']),
          ...mapGetters(['xls_name']),
          ...mapGetters(['theCurrentCatalogId']),
          ...mapGetters(['theCurrentPageNumber']),
          ...mapGetters(['theDownloadXlsDataInfos']),
          ...mapGetters(['theDyVectorData','theDyVectorDataTotal']),
          ...mapGetters(['theOptions'])

      },
      mounted() {
            console.log(window.innerHeight)
            this.requestParams.name = window.sessionStorage.getItem('shiName')
            // console.log(this.theCurrentPageNumber)
            // this.currentPage1 = this.theCurrentPageNumber
            this.requestParams.catalogId = this.theCurrentCatalogId
            this.CatalogId = this.theCurrentCatalogId
            this.$store.dispatch('dirmanage/getfindAllByDivision')
            // this.$http3.get( '/v1.0/unit/find/city/findAll').then((response)=>{
            //   console.log(response.data.data)
            //   this.options2 = response.data.data
            // })
        },
        methods: {
            downloadYSVectorDataXls(){
              var params= {
                code:"",
                cityName:"",
                catalogId:""
              }
              params.code = this.requestParams.code
              params.cityName = this.requestParams.name
              params.catalogId = this.theCurrentCatalogId
              if (params.cityName === '新疆生产建设兵团'){
                params.cityName = ''
              }
              this.$http.get('/v1.0/resultIntegration/environmentAttribute/export?cityName='+ params.cityName +'&code='+params.code + '&catalogId=' + params.catalogId).then(
                response =>{
                  console.log(response)
                  if (response.data.status==='7000'){
                    var downloadElement = document.createElement('a');
                    // var href = window.URL.createObjectURL();
                    //  downloadElement.href = 'http://localhost:8803/' + response.data.data;
                       downloadElement.href = 'http://10.16.11.240:15480/' + response.data.data;
                    //  downloadElement.href = 'http://59.223.239.59:8803/' + response.data.data;
                    downloadElement.download = '环境要素.xls';
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    // window.URL.revokeObjectURL(href);
                  }
                }
              )
            },
            resetModel(){
              this.vectorBh=''
              this.vectorQy=''
              this.vectorLx=''
              this.requestParams.name = window.sessionStorage.getItem('shiName')
              this.requestParams.code = ''
              this.requestParams.catalogId = this.theCurrentCatalogId
              console.log(this.theCurrentCatalogId)
              console.log(this.requestParams)
              this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
            },
            findDataByKeys(){
              if (this.requestParams.code==="" && this.requestParams.name === '' ){
                 this.$message.warning('请先输入查询条件')
              }
              else{
                this.requestParams.catalogId = this.theCurrentCatalogId
                this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
              }
            },
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.requestParams.pageSize = val
              this.requestParams.catalogId = this.theCurrentCatalogId
              console.log(this.requestParams)
              this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
              console.log(this.requestParams.pageSize)
              this.requestParams.pageNumber = val
              // this.requestParams.pageSize = 15
              this.requestParams.catalogId = this.theCurrentCatalogId
              console.log(this.requestParams)
              this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
            },

            handleSelectionChange(val) {
                console.log(val)
                this.selectData = val
                if (this.selectData.length){
                    this.json_data = this.selectData
                }
                else{
                    this.json_data = this.VectorData
                }
            },
            handleClickDY(row){
              console.log('row3',row)
              // this.VectorDataRow = []
              this.dialogFormVisible3 = true
              this.dialogFormVisible2 = true
              this.dyInfos.hjdybm = row.hjdybm
              this.dyInfos.hjdymc = row.hjdymc
              this.dyInfos.prov  = row.prov
              this.dyInfos.city  = row.city
              this.dyInfos.county= row.county
              this.dyInfos.gkdyfl = row.gkdyfl
              this.dyInfos.remarks = row.remarks

              // this.VectorDataRow.push(row)
            },
            handleClick(row) {
              console.log(row)
              console.log(typeof (row.catalogId));

              if( 5 < row.catalogId && row.catalogId < 10 ){
                  this.dialogFormVisible4 = true
                  this.shuiYSInfos.hjdybm = row.hjdybm
                  this.shuiYSInfos.hjdymc = row.hjdymc
                  this.shuiYSInfos.prov  = row.prov
                  this.shuiYSInfos.city  = row.city
                  this.shuiYSInfos.county= row.county
                  this.shuiYSInfos.lymc = row.lymc
                  this.shuiYSInfos.hdmc = row.hdmc
                  this.shuiYSInfos.KZDMQDJD = row.kzdmqdjd
                  this.shuiYSInfos.KZDMQDWD =  row.kzdmqdwd
                  this.shuiYSInfos.KZDMZDJD =  row.kzdmzdjd
                  this.shuiYSInfos.KZDMZDWD = row.kzdmzdwd
                  console.log(row.gkqfl)
                if(row.gkqfl=='1'){
                  this.shuiYSInfos.GKQFL ='优先保护'
                } else if(row.gkqfl=='2'){
                  this.shuiYSInfos.GKQFL ='重点管控'
                } if(row.gkqfl=='3'){
                  this.shuiYSInfos.GKQFL ='一般管控'
                }
                  // this.shuiYSInfos.HJYS  = row.hjys
                if(row.hjys=='1'){
                  this.shuiYSInfos.HJYS = '生态 '
                } else if(row.hjys=='3'){
                  this.shuiYSInfos.HJYS = '大气 '
                } if(row.hjys=='4'){
                  this.shuiYSInfos.HJYS = '土壤 '
                } if(row.hjys=='5'){
                  this.shuiYSInfos.HJYS = '自然资源 '
                }
                  // this.shuiYSInfos.YSXL  = row.ysxl

              }
              else if(25 < row.catalogId && row.catalogId < 30){
                 this.dialogFormVisible4 = true
                this.shuiYSInfos.hjdybm = row.hjdybm
                this.shuiYSInfos.hjdymc = row.hjdymc
                this.shuiYSInfos.prov  = row.prov
                this.shuiYSInfos.city  = row.city
                this.shuiYSInfos.county= row.county
                this.shuiYSInfos.lymc = row.lymc
                this.shuiYSInfos.hdmc = row.hdmc
                this.shuiYSInfos.KZDMQDJD = row.kzdmqdjd
                this.shuiYSInfos.KZDMQDWD =  row.kzdmqdwd
                this.shuiYSInfos.KZDMZDJD =  row.kzdmzdjd
                this.shuiYSInfos.KZDMZDWD = row.kzdmzdwd
                // this.shuiYSInfos.GKQFL = row.gkqfl
                // this.shuiYSInfos.HJYS  = row.hjys
                this.shuiYSInfos.YSXL  = row.ysxl
                if(row.gkqfl=='1'){
                  this.shuiYSInfos.GKQFL ='优先保护'
                } else if(row.gkqfl=='2'){
                  this.shuiYSInfos.GKQFL ='重点管控'
                } if(row.gkqfl=='3'){
                  this.shuiYSInfos.GKQFL ='一般管控'
                }
                // this.shuiYSInfos.HJYS  = row.hjys
                if(row.hjys=='1'){
                  this.shuiYSInfos.HJYS = '生态 '
                } else if(row.hjys=='3'){
                  this.shuiYSInfos.HJYS = '大气 '
                } if(row.hjys=='4'){
                  this.shuiYSInfos.HJYS = '土壤 '
                } if(row.hjys=='5'){
                  this.shuiYSInfos.HJYS = '自然资源 '
                }
                // if(this.shuiYSInfos.GKQFL==='1'){
                //   this.shuiYSInfos.GKQFL ='优先保护'
                // } else if(this.shuiYSInfos.GKQFL==='2'){
                //   this.shuiYSInfos.GKQFL ='重点管控'
                // } if(this.shuiYSInfos.GKQFL==='3'){
                //   this.shuiYSInfos.GKQFL ='一般管控'
                // }
                // this.shuiYSInfos.HJYS  = row.hjys
                // if(this.shuiYSInfos.HJYS==='1'){
                //   this.shuiYSInfos.HJYS = '生态 '
                // } else if(this.shuiYSInfos.HJYS==='3'){
                //   this.shuiYSInfos.HJYS = '大气 '
                // } if(this.shuiYSInfos.HJYS==='4'){
                //   this.shuiYSInfos.HJYS = '土壤 '
                // } if(this.shuiYSInfos.HJYS==='5'){
                //   this.shuiYSInfos.HJYS = '自然资源 '
                // }
              }
              else{
                this.dialogFormVisible2 = true
                this.ysInfo.hjdybm = row.hjdybm
                this.ysInfo.hjdymc = row.hjdymc
                this.ysInfo.prov  = row.prov
                this.ysInfo.city  = row.city
                this.ysInfo.county= row.county
                // this.ysInfo.gkqfl = row.gkqfl
                // this.ysInfo.gkqfl = row.gkqfl
                // this.ysInfo.hjys  = row.hjys
                this.ysInfo.ysxl  = row.ysxl
                if(row.gkqfl==='1'){
                  this.ysInfo.gkqfl ='优先保护'
                } else if(row.gkqfl==='2'){
                  this.ysInfo.gkqfl ='重点管控'
                } if(row.gkqfl==='3'){
                  this.ysInfo.gkqfl ='一般管控'
                }
                // this.ysInfo.HJYS  = row.hjys
                if(row.hjys==='1'){
                  this.ysInfo.hjys = '生态 '
                } else if(row.hjys==='3'){
                  this.ysInfo.hjys = '大气 '
                } if(row.hjys==='4'){
                  this.ysInfo.hjys = '土壤 '
                } if(row.hjys==='5'){
                  this.ysInfo.hjys = '自然资源 '
                }

                // this.VectorDataRow.push(row)
              }
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);

            },
            DataMigration(){
                if (this.selectData.length) {
                    alert(this.selectData)
                }
                else {
                    this.$message.error('当前没有选中可迁移的数据')
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  span{
    color: #203f6e;
  }
  .first{
    border:1px solid #45524f;
    height: 40px !important;
  }
  .second{
    border-width:1px 1px 1px 0;
    border-style: solid ;
    border-color:#45524f;
    height: 40px !important;
  }
  .first2{
    border-width:0 1px 1px 1px;
    border-style: solid ;
    border-color:#45524f;
    height: 40px !important;
  }
  .second2{
    border-width:0 1px 1px 0;
    border-style: solid ;
    border-color:#45524f;
    height: 40px !important;
  }
  .contentText{
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  /*.dialogXq{*/
  /*   position: absolute;*/
  /*   top:40%*/
  /*}*/
  /*.block{*/
  /*   !*position: absolute;*!*/
  /*   !*top: 90%;*!*/
  /*  padding-top: 10px;*/
  /*}*/
  ::v-deep .el-table td{
        padding: 7px 0 ;
    }
   .Vector{
     position: absolute;
     left: 15.5%;
     //height: 87%;
     top: 9.5%;
     bottom: 1.5%;
     width: 83.5%;
     /*background-color: #ffffff;*/
     border-radius: 8px;
}
    .dir{
        position: absolute;
        width: 25%;
        height:100%;
        background-color: white;
        border-left:2px #E9EEF3 solid ;
        overflow: auto;
        border-radius: 8px;
        box-shadow: 0 0 5px #acc4fe;
    }
    .content{
        left:25.5%;
        position: absolute;
        height: 100%;
        width:74.5%;
        overflow: auto;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 5px #acc4fe;
        ::v-deep .el-dialog__headerbtn{
          top: 15px;
        }
        ::v-deep .el-dialog__header{
          padding: 10px;
          //background-color: #545c64;
        }
        ::v-deep .el-dialog {
          position: absolute;
          top: 15%;
          left: 20%;
          //border: 3px solid #545c64;
          /*width: 540px;*/
          width: 60%;
        }
        ::v-deep  .el-dialog__title {
          font-weight: bold;
          font-size: 20px;
          color: #45524f;
        }
    }
    .broad{
      position: absolute;
      width: 98%;
      display: inline-block;
      padding: 1%;
      color: black;
      font-size: 20px;
      border-bottom: 2px solid #e9eef3;
      background-color: #ffffff;
      border-radius: 8px 8px 0 0 ;
    }
  ::v-deep .el-breadcrumb{
        font-size: 16px;
        font-family: sans-serif;
    }
    .vectortable{
        position: absolute;
        top: 12%;
        width: 98%;
        padding: 1%;
        /*height: 100%;*/
        height: calc(100% - 18%);
    }
    .el-input{
        width: 13%!important;

    }
    .searchBar{
     ::v-deep .el-input__inner{
      border-radius: 45px;
        }
      ::v-deep .el-button:focus, .el-button:hover {
        color: #fff;
        border-color: #c6e2ff;
        background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
      }
      ::v-deep .el-button--goon:active {
        color: #fff;
        border-color: #c6e2ff;
        outline: 0;
      }
    }

    .demo-input-suffix{
        position: absolute;
        top: 50px;
        background-color: #ffffff;
        padding: 10px;
    }
    .datamove{
        display: inline-block;
        margin-right: 60px;
    }
    .searchBar{
        display: inline-block;
        margin-left: 0;
    }
    .searchBar > span{
        padding: 10px;
        font-size: 14px;
    }
    .margin_left{
        margin-left: 15px;
    }
    .el-button{
        margin-left: 10px;
        font-size: 14px!important;
    }
  ::v-deep .cell{
        text-align: center;
    }
  ::v-deep .el-table__empty-text{
    line-height:44px
  }
  ::v-deep .el-table__empty-block{
    min-height: 44px;
  }

  ::v-deep .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  ::v-deep .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }
  ::v-deep .el-select .el-input__inner{
    border-radius: 45px;
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close{
    //display: none;
  }
  ::v-deep .el-form-item__content{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }
  }
  ::v-deep .el-dialog__header {
    //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);

    border-radius: 8px 8px 0 0 ;
  }
  ::v-deep .el-dialog{
    border-radius: 8px;
  }
  ::v-deep .el-button--goon:focus, .el-button--goon:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  //::v-deep .el-table .warning-row{
  //  background: #aec8e0
  //}


</style>

